<template>
    <div class="header">
        <span class="iconfont icon-yiliaozhongxin" style="font-size: 50px;"></span>
        <span class="logo">气候性传染病实时监测系统</span>

        <div class="bar">
            <router-link class="topbar" active-class="active" to="/" exact>首页</router-link>
            <!-- 监测下拉菜单 -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    监测<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="/real-time">实时监测</el-dropdown-item>
                    <el-dropdown-item command="/on-line">在线监测</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- 数据可视化下拉菜单 -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    疾病数据可视化<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="/overview">患病总览</el-dropdown-item>
                    <el-dropdown-item command="/resource">医疗资源</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- 疾病库以及预防下拉菜单 -->
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    疾病库以及预防<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="/information-base">疾病信息库</el-dropdown-item>
                    <el-dropdown-item command="/cure">治疗导航</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <router-link class="topbar" active-class="active" to="/record">后台记录</router-link>
        </div>
    </div>
</template>

<script>
import '@/assets/iconfont/homelogo/iconfont.css'
export default {
    methods: {
        // 下拉菜单框效果
        handleCommand(command) {
            this.$router.push(command).catch((err) => {
                // 检查错误是否为重复导航错误
                if (err.name !== "NavigationDuplicated") {
                    // 如果不是重复导航错误，可能是其他类型的路由错误，抛出以便可以捕获并处理
                    throw err;
                }
                // 如果是重复导航错误，则不执行任何操作，简单忽略这个错误
            });
        },
    },

};
</script>

<style scoped>
.header {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    border-bottom: 1px solid #eaeaea;
    background-color: #ffffffa8;
}
.header:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.bar{
    width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
}

.topbar {
    margin: 0 10px;
    font-family: "楷体";
    color: #7dbcfc;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    font-size: 20px;
}

.topbar:hover {
    opacity: 1;
    color: #ffffff;
    background-color: #007bff;
}

.active,
a {
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}

.logo{
    font-size: 32px;
    border-radius: 50%;
    margin-top: 10px;
    position: absolute;
    left: 100px;
    /* background-color: #99ccff; */
    font-family: "楷体";
    color: #000000;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.iconfont{

    position: absolute;
    left: 55px;
}
.el-dropdown-link {
    font-size: 18px;
}
</style>